import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:provider/provider.dart';
import 'package:s_k_todo/adapter/un_start_task.dart';
import 'package:s_k_todo/provider/task_list.dart';

import '../r.g.dart';
import '../widget/base_page.dart';
import '../widget/task_step_list.dart';

class HomeMainBody extends StatelessWidget {
  PageType type;

  HomeMainBody(this.type, {super.key});

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverToBoxAdapter(
          child: AppBar(
            backgroundColor: Colors.transparent,
            scrolledUnderElevation: 0,
            shadowColor: Colors.transparent,
            elevation: 0,
            title: const Text("Current Task"),
          ),
        ),
        const SliverToBoxAdapter(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 15),
            child: _CurrentTask(),
          ),
        ),
        SliverToBoxAdapter(
            child: AppBar(
                backgroundColor: Colors.transparent,
                shadowColor: Colors.transparent,
                scrolledUnderElevation: 0,
                elevation: 0,
                title: const Text("UnStart Task"))),
        SliverPadding(
          padding: EdgeInsets.symmetric(horizontal: 15),
          sliver: _TodoGrid(type),
        )
      ],
    );
  }
}

class _TodoGrid extends StatelessWidget {
  final PageType type;

  const _TodoGrid(this.type, {super.key});

  @override
  Widget build(BuildContext context) {
    TaskListProvider provider = context.watch();
    if (provider.taskList.isEmpty) {
      return SliverToBoxAdapter(
        child: SvgPicture.asset(R.svg.asset.task_empty.assetName),
      );
    }
    return type == PageType.phone
        ? SliverList.separated(
            itemBuilder: (ctx, index) => Container(
                  margin: const EdgeInsets.all(5),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8),
                      color: Colors.white,
                      boxShadow: [
                        BoxShadow(
                            color:
                                Theme.of(context).primaryColor.withOpacity(.2),
                            blurRadius: 5,
                            spreadRadius: 1)
                      ]),
                  child: UnStartTaskItem(provider.taskList[index]),
                ),
            separatorBuilder: (ctx, index) => SizedBox(
                  height: 10,
                ),
            itemCount: provider.taskList.length)
        : SliverGrid(
            delegate: SliverChildBuilderDelegate(
              (ctx, index) => GestureDetector(
                onTap: () {
                  provider.selectTask(index);
                },
                child: Container(
                  margin: const EdgeInsets.all(5),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8),
                      color: Colors.white,
                      boxShadow: [
                        BoxShadow(
                            color:
                                Theme.of(context).primaryColor.withOpacity(.2),
                            blurRadius: 5,
                            spreadRadius: 1)
                      ]),
                  child: UnStartTaskItem(provider.taskList[index]),
                ),
              ),
              childCount: provider.taskList.length,
            ),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              childAspectRatio: 16 / 9,
              mainAxisSpacing: 10,
              crossAxisSpacing: 5,
              crossAxisCount: 2,
            ));
  }
}

class _CurrentTask extends StatelessWidget {
  const _CurrentTask({super.key});

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 8,
      child: SizedBox(
        width: double.infinity,
        height: 200,
        child: Stack(
          children: [
            Positioned(
              right: 0,
              bottom: -2,
              left: 0,
              child: _CurrentBg(),
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
              child: _CurrentTaskBody(),
            ),
          ],
        ),
      ),
    );
  }
}

class _CurrentBg extends StatelessWidget {
  const _CurrentBg({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        const Expanded(
            child: Padding(
          padding: EdgeInsets.only(left: 15, bottom: 10),
          child: LinearProgressIndicator(
            value: 0.4,
          ),
        )),
        const SizedBox(
          width: 20,
        ),
        SvgPicture.asset(
          R.svg.asset.working.assetName,
          height: 120,
          width: 120,
        ),
      ],
    );
  }
}

class _CurrentTaskBody extends StatelessWidget {
  const _CurrentTaskBody({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          "先写个页面",
          style: Theme.of(context)
              .textTheme
              .titleLarge
              ?.copyWith(fontWeight: FontWeight.w400),
        ),
        SizedBox(
          height: 30,
        ),
        Row(
          children: [
            Text("time:9:10-15:30"),
            SizedBox(
              width: 20,
            ),
            Text("timeLeft:1.5H")
          ],
        ),
        SizedBox(
          height: 10,
        ),
        Row(
          children: [Text("stepNum:3")],
        ),
        SizedBox(
          height: 15,
        ),
        // SizedBox(
        //   height: 40,
        //   child: TaskStepList(),
        // )
      ],
    );
  }
}
